<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_页面固定广告条</title>
    <style>
        .top {
            background-color: #5AA4AE;
            height: 120px;
            color: #fff;
            font-size: 30px;
            position: fixed;
            top: 0;
            width: 100vw;/* viewport视口 100vw撑满全屏宽 100vh撑满全屏高*/
        }
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;
            top: 300px;
        }
        .left {
            background-color: #FFF799;
            left: 20px;
        }
        .right {
            background-color: #F35336;
            right: 20px;
        }
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
<div class="top">我是顶部的广告条2222222222222</div>
<div class="left">我是左侧的广告条</div>
<div class="right">我是右侧的广告条</div>
<div class="main">
    我是内容
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis illo incidunt non rem tempore ut. Aperiam
        beatae commodi deleniti dolores exercitationem facilis, itaque nihil officiis perspiciatis possimus repellat
        sequi ullam?
    </div>
    <div>Ad, enim, odit. Alias, autem commodi consequatur cum dolor ducimus esse ex ipsum iste minus molestiae nam,
        neque nisi numquam officia provident quam quisquam ratione rem repudiandae vel veritatis voluptates?
    </div>
    <div>Animi consequatur cupiditate harum quibusdam, quidem sed sint? Animi consectetur cum incidunt magnam officia
        quas quisquam ratione? Doloremque dolorum excepturi expedita fugiat iusto libero ratione suscipit, vitae. Ea,
        error, odio?
    </div>
    <div>Ad dolores eaque harum molestiae nihil quod totam! Aliquid aperiam atque autem blanditiis commodi dignissimos
        dolore labore minus molestias nesciunt nostrum odit perferendis provident reiciendis reprehenderit rerum
        sapiente vel, velit.
    </div>
    <div>Amet atque beatae cumque, dolor dolore error eum facere fugiat inventore ipsa laboriosam maxime mollitia non
        nulla provident quae, tempora. Amet aut distinctio doloremque enim iste maiores provident? Eum, magnam.
    </div>
    <div>Ad commodi consectetur, culpa dicta eius explicabo, fugit id inventore ipsa iusto, laboriosam magnam mollitia
        perferendis quam quibusdam ratione reiciendis repellendus unde velit vitae voluptas voluptatibus voluptatum?
        Dolorum libero, nobis.
    </div>
    <div>Adipisci asperiores cupiditate, excepturi itaque maiores minima nam nihil reprehenderit? Aliquam consectetur
        cumque eligendi, error minima saepe unde. Dignissimos fugit id impedit ipsa maxime non nulla numquam odio optio
        voluptatem!
    </div>
    <div>A accusantium animi eum, fuga inventore odio omnis quidem recusandae sint. Cupiditate doloremque eaque eligendi
        est et, expedita fuga laudantium omnis optio pariatur quidem quo recusandae, reiciendis! Doloremque rerum,
        voluptas?
    </div>
    <div>Accusantium alias aliquam asperiores beatae culpa cupiditate, dolor dolores dolorum ducimus, ea enim excepturi
        explicabo illum ipsa ipsam laudantium maiores mollitia non odio odit praesentium qui rem tempora ullam veniam.
    </div>
    <div>A accusantium assumenda atque autem consequatur dicta dolorum eligendi est excepturi fuga fugit harum illum
        incidunt ipsa ipsum iste, laborum modi nostrum optio qui quisquam recusandae reprehenderit unde velit voluptas?
    </div>
    <div>Illo nulla repudiandae rerum ut veritatis! Ad aspernatur blanditiis commodi, dolor dolorem eos illo in
        laboriosam maxime necessitatibus nihil omnis placeat praesentium quas quasi quia sapiente sint sit totam,
        voluptatem.
    </div>
    <div>Deserunt explicabo odit officia suscipit temporibus? Ab ad aspernatur at blanditiis debitis fugit, ipsa iure
        laudantium libero maxime modi neque odio officia pariatur perferendis sequi temporibus ullam unde. Magnam,
        repellendus?
    </div>
    <div>A accusantium atque commodi consectetur et, fugit id incidunt neque optio quaerat quis quisquam vero?
        Architecto beatae consequatur debitis iste laboriosam praesentium provident vitae. Excepturi inventore natus
        necessitatibus perspiciatis quasi.
    </div>
    <div>Accusantium aut commodi corporis dolores esse fugiat, laborum nam natus nobis, nulla odit quis rerum temporibus
        voluptate voluptates. Atque autem cum dolor dolorum incidunt laboriosam porro tempora unde vero voluptate.
    </div>
    <div>Amet consequatur cum dolore eaque est harum molestias mollitia nesciunt possimus recusandae repellat
        reprehenderit ullam, voluptate. Delectus dolorem doloribus eligendi iste itaque nulla numquam quam repudiandae?
        Amet ex fugit sed?
    </div>
    <div>Adipisci amet architecto beatae commodi consequatur corporis debitis dolorem eveniet ex excepturi fuga incidunt
        inventore modi obcaecati odio omnis pariatur possimus provident quia quis, repellendus sapiente similique
        tempora totam vitae.
    </div>
    <div>Eos error exercitationem laboriosam molestiae molestias nobis voluptate. A aspernatur dolores officiis
        praesentium quae vel vero! Ab ad aliquid culpa impedit maiores, nam nobis obcaecati quo quod ullam, vero vitae!
    </div>
    <div>A accusamus ad adipisci aliquam aut consequatur cumque cupiditate deserunt dicta distinctio ea eaque enim esse
        facere, fuga incidunt labore molestias mollitia nostrum officia officiis pariatur possimus recusandae rem sed!
    </div>
    <div>Ab aperiam aut consectetur corporis cum delectus deserunt dolor dolore, doloremque, exercitationem harum ipsam
        iste iure iusto, laboriosam magni molestias nam nisi praesentium quibusdam quo ratione reiciendis saepe sint
        tempore!
    </div>
    <div>Aut distinctio expedita maiores pariatur quam quis repellendus reprehenderit rerum veritatis voluptas?
        Accusantium adipisci aspernatur corporis culpa doloribus iusto nemo numquam quis sequi voluptatibus. Animi
        assumenda earum maxime quisquam voluptatibus?
    </div>
    <div>Ab accusamus architecto beatae commodi consequuntur cum cumque cupiditate dicta dolores dolorum est facere
        ipsam iste, iure magni minus neque nihil odit perspiciatis ratione reiciendis rerum sequi sint temporibus vero!
    </div>
    <div>Aliquam beatae consequatur corporis dicta distinctio dolorum eius, eveniet exercitationem, fugit illum in iure
        laboriosam laudantium maiores nobis nostrum officia omnis pariatur provident quia quo quos ratione reiciendis
        voluptatibus voluptatum?
    </div>
    <div>Architecto delectus dolore, eos error fugit harum molestias quia quo repellat saepe, suscipit ut voluptate
        voluptatibus. A consequuntur fuga pariatur praesentium. Aliquid animi ea in nisi quia repellendus repudiandae
        voluptates.
    </div>
    <div>Facere, ipsa laudantium qui quia quos repudiandae sint sit sunt voluptatem! Ad, adipisci, consequuntur culpa
        distinctio doloremque esse eum excepturi exercitationem explicabo fugit maxime, officiis quod saepe sed suscipit
        vel.
    </div>
    <div>Aliquid esse explicabo mollitia necessitatibus nostrum, optio quasi voluptatum. Alias aspernatur commodi nihil
        repellat unde. At consequatur ea excepturi pariatur sapiente? Adipisci aut dolorem est iste, nesciunt quo sit
        voluptatibus?
    </div>
    <div>Adipisci atque corporis cumque dolores est eum eveniet ex excepturi exercitationem harum id illo impedit modi
        mollitia nisi nobis omnis possimus, quaerat ratione sit ullam unde veritatis voluptas. Laborum, maiores.
    </div>
    <div>A accusamus, cupiditate eaque enim esse facere ipsa laboriosam molestias mollitia praesentium quia quos ratione
        ullam. Amet, dicta enim eos est, ipsa iure minus neque odit, quidem ratione repudiandae sunt.
    </div>
    <div>Amet animi deleniti hic laudantium placeat reprehenderit voluptates? Accusamus aliquam assumenda culpa, eaque
        esse ex expedita hic illo illum ipsam labore libero non odio possimus quis sapiente, similique sit voluptatem.
    </div>
    <div>Consectetur labore, quasi! Architecto dolore inventore pariatur quos! Culpa deleniti dignissimos facere
        mollitia quaerat quasi quod recusandae rem vero voluptate? Alias enim est incidunt praesentium quaerat quia quod
        repellat soluta?
    </div>
    <div>Aut beatae cum, dolores fugit molestias nulla quae quo suscipit ut voluptatum? Accusamus adipisci at
        consequatur culpa, distinctio ea enim, eos excepturi, modi quidem quo repudiandae rerum sequi velit voluptates?
    </div>
    <div>Aliquam aperiam aspernatur culpa dolore dolores eaque mollitia odit, pariatur sit vero? Assumenda corporis
        dolorem facere facilis fuga impedit, laboriosam, minus molestias nam necessitatibus, numquam porro quisquam rem
        reprehenderit unde!
    </div>
    <div>Dolorem doloremque, eligendi est harum laboriosam maiores pariatur quas quidem repudiandae voluptatibus. A
        explicabo porro quidem. Aspernatur at eaque, earum eligendi illo, illum nisi nobis odit quas, sapiente tenetur
        veritatis.
    </div>
    <div>Deserunt ea, tempore. Eveniet facere quam unde. Atque dolore esse porro repudiandae. Cupiditate delectus
        facilis fuga minus nihil, odio porro provident rerum sit. Impedit, maiores minus natus necessitatibus officia
        voluptate.
    </div>
    <div>Accusamus, aspernatur debitis delectus doloribus expedita fugit hic minima molestias officia pariatur
        perferendis possimus recusandae rem sapiente unde vel veritatis. Doloremque dolores eveniet molestiae nemo
        quibusdam quisquam tenetur. Recusandae, soluta.
    </div>
    <div>Amet assumenda autem cum eligendi id ipsa itaque, mollitia nostrum quam rerum sapiente, temporibus vel?
        Accusantium asperiores debitis eligendi, ex excepturi facere officiis omnis ratione repellendus, sed ullam unde
        voluptas!
    </div>
    <div>Amet animi, architecto autem error eum ex necessitatibus nulla odit praesentium ratione rem sunt temporibus
        totam, veritatis voluptates! Accusamus eligendi est ipsum iure, labore nam nihil temporibus? Fugiat, nam quasi!
    </div>
    <div>Adipisci, amet atque hic iure maiores minus molestiae odit omnis provident quo quos tempore veritatis?
        Aspernatur autem dolorum est ex exercitationem nesciunt quibusdam totam veniam? Ex magni quam quos temporibus!
    </div>
    <div>Ab adipisci culpa dicta dolorem doloremque doloribus eos nam nihil nostrum praesentium, ratione repellat
        repellendus, sequi sunt voluptates! Aspernatur aut consequatur dignissimos dolor, eligendi fugit hic
        necessitatibus reprehenderit sapiente temporibus!
    </div>
    <div>Accusantium amet autem cum, debitis dolorem ducimus ex expedita fuga hic id illo in, inventore ipsam iste
        itaque libero molestias natus omnis pariatur porro, quae sit tempora vero. Molestias, omnis!
    </div>
    <div>Accusantium adipisci alias consequuntur cupiditate eos eveniet facilis in incidunt ipsum iusto non porro
        quaerat, quam quis quisquam reprehenderit vero! Aspernatur assumenda delectus dolorem et facilis in, iste modi
        voluptatum!
    </div>
    <div>Commodi debitis magnam nesciunt quae sunt? Ex necessitatibus sed ullam voluptas voluptatibus. Aliquid dolor eos
        est ex expedita nemo praesentium quis reprehenderit. Accusantium repellat ullam vel? Animi debitis voluptate
        voluptates.
    </div>
    <div>Ad aperiam, deserunt enim et illo inventore, mollitia perspiciatis quibusdam quo repellat sapiente sed
        temporibus! A accusamus aliquid doloremque ex illo in iure molestias nostrum repellendus tempore! Modi, nihil,
        velit!
    </div>
    <div>Dolor dolores fuga magni maxime nobis perferendis quisquam. Aliquid aperiam atque consectetur culpa cum
        deleniti dignissimos est inventore nihil, nobis odit quam, quas sunt! Error magnam quisquam reprehenderit sunt
        tenetur!
    </div>
    <div>Dolore ea modi obcaecati optio recusandae sed sint sunt suscipit vel voluptatum? Cupiditate deleniti iusto
        molestiae numquam. Ab dolores ex in laboriosam suscipit. Alias ducimus, odio! Autem dicta hic quis!
    </div>
    <div>Alias animi aperiam asperiores blanditiis debitis dolorem ea error fugit, illo impedit ipsum iste iusto labore
        laboriosam laborum maiores mollitia nesciunt nisi nulla officiis perferendis quas, quasi tenetur totam
        voluptatibus?
    </div>
    <div>Ab, aspernatur cupiditate debitis deserunt, dolorem eligendi enim ex exercitationem explicabo fuga libero
        maxime necessitatibus officia officiis perspiciatis possimus qui totam vel! A accusamus aperiam consequatur ea
        quisquam voluptate voluptatum!
    </div>
    <div>Accusamus adipisci aliquid dignissimos excepturi unde voluptates voluptatibus? Aspernatur quae, voluptatibus!
        Accusamus amet commodi dolore eaque eligendi enim fugit id, laboriosam nemo neque nisi nobis nulla obcaecati
        quae quis tempora?
    </div>
    <div>Ab dicta, eum eveniet facilis omnis reiciendis rerum? Alias aspernatur at aut doloribus iure perspiciatis saepe
        similique. Dolores est facere, harum, in laudantium nesciunt obcaecati quod ratione sapiente similique vel?
    </div>
    <div>Animi consequuntur explicabo, hic illum, libero minus natus nesciunt numquam quidem quis similique, sint
        voluptas. Aperiam aut dolorem dolores eum molestias nostrum officia quidem rem repellat repellendus sed, tempore
        temporibus?
    </div>
    <div>Autem consectetur cum ducimus officia quos sequi sunt ut! Ab, blanditiis dolorum ea earum eveniet inventore
        ipsam ipsum iure minus molestiae nemo odit quasi qui quod quos, reprehenderit ullam velit.
    </div>
    <div>Accusamus consequatur cupiditate dolore dolores eius esse hic illum laudantium libero magnam minus nam nemo
        obcaecati odit quis sapiente, sequi sint tempora vero voluptas? Adipisci cum cupiditate nesciunt pariatur
        possimus?
    </div>
    <div>Ab amet at cumque expedita ipsa libero magni sed sit tenetur voluptatum. Architecto culpa delectus deserunt
        enim explicabo facere labore modi non nulla perferendis quibusdam, quos ratione recusandae tempore vero.
    </div>
    <div>Ad adipisci aliquam aperiam aut consequatur culpa fuga optio, quae quas quisquam reiciendis repudiandae saepe
        sint sit soluta, suscipit tempore voluptatibus. Adipisci corporis deleniti eaque eius maiores maxime sequi
        velit.
    </div>
    <div>Aliquid libero nesciunt numquam quaerat vitae voluptatibus. Consectetur magni mollitia sed! Id, laudantium
        natus obcaecati perferendis placeat recusandae? Asperiores atque delectus excepturi explicabo, maiores possimus
        voluptatem voluptatibus? Cum, dolores, inventore!
    </div>
    <div>Animi, deleniti earum explicabo illum laborum, nemo omnis quaerat quidem repellendus tempora temporibus ut
        veniam. Dolor doloremque eaque esse possimus repellendus? A laudantium nisi odio sint soluta. Beatae, illo,
        mollitia?
    </div>
    <div>Cum debitis ducimus eligendi eos facere hic ipsum nihil officiis quam reiciendis sit, vitae. Ad dignissimos,
        dolorem ex incidunt labore minima molestiae, nisi nostrum optio provident quisquam rem tempore vero!
    </div>
    <div>Ab aperiam cumque cupiditate distinctio, dolores ducimus eligendi, eveniet explicabo harum illum, ipsum iusto
        laboriosam minima nemo nihil nulla quasi qui ratione repudiandae rerum sed sit veniam. Magnam, quos, vero!
    </div>
    <div>Animi assumenda consectetur dolorem doloremque dolores dolorum eaque enim esse expedita id illo, ipsa ipsam
        iste itaque laudantium magnam minus nam nihil nostrum odit provident qui reprehenderit sint veniam vitae.
    </div>
    <div>Adipisci deserunt doloremque earum id incidunt maxime tempora. Alias beatae culpa delectus ipsum necessitatibus
        obcaecati porro quod? Ad adipisci aliquid architecto at corporis expedita facere magnam nemo soluta vel? Iure?
    </div>
    <div>Amet atque, corporis dolorem explicabo fuga fugit illo magnam minus molestiae numquam rem vel veritatis
        voluptate. Adipisci at atque autem deserunt doloribus eaque excepturi maxime mollitia quae quas sequi, totam?
    </div>
</div>
</body>
</html>